import React, {CSSProperties} from 'react'
import {ICartList} from "../../../../store/modules/cartStore";
import PubSub from 'pubsub-js'
import {inject,observer} from 'mobx-react'
import CartStore from "../../../../store/modules/cartStore";
import { Checkbox } from "@material-ui/core"

const ItemStyle: CSSProperties = {
    width: '100vw',
    backgroundColor: '#fff',
    marginBottom: '1.5vh',
    padding: '2vh 4vw',
    display: 'flex',
    flexFlow: 'row nowrap',
    justifyContent: "space-around",
}
const imgStyle: CSSProperties = {
    width: '35vw'
}
const textStyle: CSSProperties = {
    width: '40vw',
    display: 'flex',
    flexFlow: 'column nowrap',
    justifyContent: "space-between"
}
const textFootStyle: CSSProperties = {
    width: '100%',
    display: 'flex',
    flexFlow: 'row nowrap',
    justifyContent: "space-between",
    alignItems: 'center',
}
const subBtnStyle: CSSProperties = {
    border: '1px solid #999',
    padding: '.5vh 2vw',
    fontSize: '13px',
    borderRadius: '5px 0 0 5px'
}
const numStyle: CSSProperties = {
    borderTop: '1px solid #999',
    borderBottom: '1px solid #999',
    padding: '.5vh 4vw',
    color: '#f03e3e',
    fontSize: '13px'
}
const addBtnStyle: CSSProperties = {
    border: '1px solid #999',
    padding: '.5vh 2vw',
    fontSize: '13px',
    borderRadius: '0 5px 5px 0'
}
interface IProps {
    goodInfo: ICartList;
    cartStore?: CartStore
}
const CartItem = (props: IProps) => {
    //图片加载完成时刷新高度
    const imgLoaded = () => {
        PubSub.publish('rfs')
    }
    const handleAdd = () => {
        console.log(1)
        props.cartStore?.userUpdateCount(props.goodInfo.cid,1)
    }
    const handleSub = () => {
        if(props.goodInfo.goodCount === 1) return
        props.cartStore?.userUpdateCount(props.goodInfo.cid,-1)
    }
    return (
        <div style={ItemStyle}>
            <Checkbox color='secondary'/>
            <img src={props.goodInfo.goodcover} alt="cover" style={imgStyle} onLoad={imgLoaded}/>
            <div style={textStyle}>
                <div style={{fontSize: '3.5vw'}}>{props.goodInfo.goodName}</div>
                <div style={textFootStyle}>
                    <div style={{color: '#ff5757',fontSize: '4.5vw'}}>
                        ￥{props.goodInfo.goodPrice}
                    </div>
                    <div style={{display: 'flex'}}>
                        <div style={subBtnStyle} onClick={handleSub}>-</div>
                        <div style={numStyle}>{props.goodInfo.goodCount}</div>
                        <div style={addBtnStyle} onClick={handleAdd}>+</div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default inject('cartStore')(observer(CartItem))